<template>
    <div>
      <!---->
      <div style="display: flex;">
        <div class="card"   v-for="tribestaff in tribestaffList" :key="tribestaff.tribeList.id" >

          <div class="image">
            <img :src="tribestaff.tribeList.photopath" style="width: 100%"/>
          </div>
          <div class="content">
            <div class="title">
              <strong>{{tribestaff.tribeList.name}}</strong>
            </div>
            <div class="description">
              <p style="color: #fffa3b">{{tribestaff.tribeList.produce}}</p>
            </div>
            <!--<router-link to="/TribalDetails">详情</router-link>-->
            <el-link type="danger" @click="goToDetails(tribestaff)">详情</el-link>
          </div>
          </div>
        </div>

      <el-empty v-if="tribestaffList==''  ||tribestaffList==null" description="你还没有加入的部落(ಥ_ಥ) ，快去加入吧(*^▽^*)"></el-empty>

    </div>
</template>

<script>
    export default {
        name: "MyJoinTribe",
      data(){
          return{
            userId:'',
            state:'',
            tribestaffList:[],
            user:{}
          }
      },
      methods:{
        paging(){
          this.user= JSON.parse(sessionStorage.getItem("user1"))
          // console.log("this.user",this.user)
          this.userId=this.user.id
          console.log("this.userId",this.userId)
          this.$axios.get("tribestaff/findByuserId?userId="+this.userId).then(resp=>{
            this.tribestaffList=resp.data
            console.log("this.tribestaffList",this.tribestaffList)

          })
        },
        goToDetails(tribestaff) {
          // 通过 $router.push 实现路由跳转
          sessionStorage.setItem("tribeId",tribestaff.tribeList.id)
          this.$router.push({
            name: 'TribalDetails',
            params: {
              id: tribestaff.tribeList.id,
              object: JSON.stringify(tribestaff.tribeList) // 将对象转换为字符串传递
            } });
        }
      },
      created() {
          this.paging()

        }

    }
</script>

<style scoped>

.card {
  display: flex;
  align-items: center;
  width: 400px;
  height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  transition: box-shadow 0.2s ease-in-out;
  margin-left: 20px;
  background: linear-gradient(90deg, #b9f1ff 0%, #45c3ff 100%);
}

.card:hover {
  box-shadow: 0 0 5px 3px #ccc;
  transform: scale(1.1);
}

.image {
  flex: 0 0 150px;
  margin-right: 10px;
}

.title {
  font-weight: bold;
}

.description {
  margin-top: 2px;
  display: -webkit-box; /* 设置为弹性盒子布局 */
  -webkit-line-clamp: 2; /* 限制最多显示两行内容 */
  -webkit-box-orient: vertical; /* 垂直排列 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 超出容器的部分显示省略号 */
}

</style>
